<template>
  <div style="margin-top:20px;">
    <div class="title">
      <div>
        <span>全景图像</span>
        <span v-if="panoramaFlag" class="tip">暂无全景图像</span>
      </div>
      <el-button
        class="btn"
        size="mini"
        type="primary"
        @click.native="openDialog"
      >添加全景图像</el-button>

    </div>
    <panorama-list
      :panoramas="panoramas"
    />
    <my-dialog
      :dialog-form-visible="dialogFormVisible"
      :temp="temp"
      :click-dialog="clickDialog"
      @close-dialog="closeDialog"
      @success="success"
    />
  </div>
</template>

<script>
import MyDialog from './components/MyDialog'
import PanoramaList from './components/PanoramaList'

export default {
  name: 'Panorama',
  components: {
    MyDialog,
    PanoramaList
  },
  props: {
    panoramas: {
      type: Array,
      required: true
    },
    placeId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      clickDialog: false,
      temp: {
        image: '',
        overallURL: '',
        placeId: this.placeId
      }
    }
  },
  computed: {
    panoramaFlag() {
      return this.panoramas.length === 0
    }
  },
  methods: {
    resetTemp() {
      this.temp = {
        image: '',
        overallURL: '',
        placeId: this.placeId
      }
    },
    openDialog() {
      this.resetTemp()
      this.dialogFormVisible = true
      this.clickDialog = !this.clickDialog
    },
    closeDialog() {
      this.dialogFormVisible = false
    },
    success() {
      this.$router.go(0)
      // this.$emit('reload')
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  // padding:10px;
  font-weight:bolder;
  display:flex;
  align-items: center;
  .tip {
    color:#999;
    font-size:13px;
  }
  > .btn {
    margin-left:20px;
  }
}
</style>
